﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="group-mail.aspx.cs" Inherits="famails.BackEnd.page.group_mail" MasterPageFile="~/Master.Master" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="width:100%;padding:10px;">
        <!--start content 01-->
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border:1px solid #333;padding:0px;margin-bottom:10px;">
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px 20px;background:#000;color:#fff;font-size:18px;font-weight:bold;position:relative;">   
               Thêm nhóm Email
            </div>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
                <asp:Panel Visible="false" ID="pnError" runat="server">
                    <div class="error-box round">
                        <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
                <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                    <div class="confirmation-box round">
                        <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto;padding:10px;">
                <fieldset>
                    <p>
                        <asp:HiddenField ID="GroupId" runat="server" />
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                            Tên nhóm Email</label>
                        <asp:TextBox ID="txtGroupName" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" 
                                        runat="server"></asp:TextBox>
                    </p>
                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto;padding:10px;">
                <fieldset>
                    <p>
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                            Tài khoản con</label>
                        <asp:DropDownList ID="dropSubClient" runat="server" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" >
                                </asp:DropDownList>
                    </p>
                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto;padding:10px;">
                <fieldset>
                    <p>
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                           Chú thích</label>
                        <asp:TextBox ID="txtDescription" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" TextMode="MultiLine" 
                                        runat="server"></asp:TextBox>
                        <em style="color:#333;">Giải thích cho nhóm email trên.</em>
                    </p>
                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto;padding:35px;">
                <fieldset>
                        <button runat="server" class="btn" style="background:#333;color:#fff;text-align:center;padding:6px 15px;border-radius:0px;" onserverclick="btnSave_Click">
                            <i class="fa fa-save"></i> Lưu nhóm email
                        </button>
                </fieldset>
            </div>
            <style>
                #contentjqxgrid ,#pagerjqxgrid{
                    width:100% !important;
                }
            </style>
           
                            <div class="stripe-separator">
                                <!--  -->
                            </div>
           
                        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:0px;" id="divList">
                        <div id='jqxWidget' style="width:100% !important;font-size: 13px; font-family: Verdana; float: left;">
                            <div id="jqxgrid" style="width:100% !important;">
                            </div>

                            <div id="popupWindow">
                                <div>
                                    Xóa nhóm mail
                                </div>
                                <div style="overflow: hidden;">
                                    <p>
                                        Bạn có chắc là muốn xóa nhóm mail này không?
                                    </p>
                                    <button id="del">
                                        Yes</button>
                                    <button id="cancel">
                                        No</button>
                                </div>
                            </div>
                        </div>
                        <!----------------->
                        <script type="text/javascript">
                            jQuery(function ($) {
                                var cellsrenderer = function (row, column, value) {
                                    var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "Id");
                                    //alert(name);
                                    return '<a style="margin: 4px;color:#000;" href="group-mail.aspx?Id=' + id + '">' + value + '</a>';
                                }
                                $("#jqxgrid").jqxGrid('showloadelement');
                                $.ajax({
                                    type: "POST",
                                    url: "group-mail.aspx/search",
                                    //data: postValue,
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    success: function (data) {
                                        var source =
                                {
                                    datatype: "json",
                                    datafields: [
                                        { name: 'Id', type: 'int' },
                                        { name: 'Name', type: 'string' },
                                          { name: 'AssignTo', type: 'string' },
                                          { name: 'Description', type: 'string' }
                                    ],
                                    id: 'Id',
                                    localdata: data,
                                    pager: function (pagenum, pagesize, oldpagenum) {
                                    }
                                };
                                        var dataAdapter = new $.jqx.dataAdapter(source);
                                        $("#jqxgrid").jqxGrid(
                                        {
                                            width: $('#jqxWidget').width(),
                                            source: dataAdapter,
                                            selectionmode: 'multiplerowsextended',
                                            sortable: true,
                                            pageable: true,
                                            autoheight: true,
                                            columnsresize: true,
                                            columns: [
                                              { text: 'Tên nhóm mail', datafield: 'Name' },
                                              { text: 'Tài khoản con', datafield: 'AssignTo' },
                                              { text: 'Ghi chú', datafield: 'Description' },
                                               {
                                                   text: 'Xóa', datafield: 'Id', columntype: 'button', cellsrenderer: function () {
                                                       return "Xóa";
                                                   }, buttonclick: function (row) {
                                                       // open the popup window when the user clicks a button.
                                                       id = $("#jqxgrid").jqxGrid('getrowid', row);
                                                       var offset = $("#jqxgrid").offset();
                                                       $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + ($('#divList').width() / 2 - 150), y: parseInt(offset.top) + 60 } });
                                                       // show the popup window.
                                                       $("#popupWindow").jqxWindow('show');
                                                   }
                                               }
                                            ]
                                        });

                                    }
                                });
                                $("#popupWindow").jqxWindow({ resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
                                $("#del").jqxButton({ theme: theme });
                                $("#cancel").jqxButton({ theme: theme });
                                $("#del").click(function () {
                                    $.ajax({
                                        type: "POST",
                                        url: "group-mail.aspx/Delete",
                                        data: "{Id:" + id + "}",
                                        contentType: "application/json; charset=utf-8",
                                        dataType: "json",
                                        success: function (data) {
                                            $('#jqxgrid').jqxGrid('deleterow', id);
                                            $("#popupWindow").jqxWindow('hide');
                                        }
                                    });
                                });

                                $("#cancel").click(function () {
                                    $("#popupWindow").jqxWindow('hide');
                                });
                            });
                        </script>
                        </div>
        </div>
    </div>
</asp:Content>
